<template>
  <div class="questionEntry">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <div>
        <el-form label-width="100px" :model="form" :rules="rules" ref="form">
          <el-form-item label="学科:" placeholder="请选择" prop="subjectID">
            <el-select v-model="form.subjectID" @change="handleChange">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" placeholder="请选择" prop="catalogID">
            <el-select v-model="form.catalogID">
              <el-option
                v-for="item in catalogID"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" placeholder="请选择" prop="enterpriseID">
            <el-select v-model="form.enterpriseID">
              <el-option
                v-for="item in companysList"
                :key="item.id"
                :label="item.company"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div class="area">
            <div class="province">
              <el-form-item label="城市:" placeholder="请选择" prop="province">
                <el-select v-model="form.province" @change="changeProvince">
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="citys">
              <el-form-item prop="city" placeholder="请选择" label="">
                <el-select v-model="form.city" style="margin-left: 10px">
                  <el-option
                    v-for="(item, index) in citys"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="方向:" placeholder="请选择" prop="direction">
            <el-select v-model="form.direction">
              <el-option
                v-for="(item, index) in directionList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型:">
            <el-radio-group
              v-model="form.questionType"
              @change="questionTypeChange"
            >
              <el-radio
                v-for="item in questionType"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度:">
            <el-radio-group v-model="form.difficulty">
              <el-radio
                v-for="item in difficulty"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干:" prop="question">
            <quill-editor v-model="form.question"></quill-editor>
          </el-form-item>
          <el-form-item label="选项"> </el-form-item>
          <div v-if="qsType">
            <el-form-item
              v-for="(domain, index) in form.options"
              :key="domain.key"
              :prop="'options.' + index + '.value'"
            >
              <el-radio-group v-model="radio">
                <el-radio :label="domain.code">{{ domain.code }} :</el-radio>
              </el-radio-group>
              <el-input v-model="domain.title"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button disabled size="small">+增加选项与答案</el-button>
            </el-form-item>
          </div>
          <div v-if="qsTypes">
            <el-form-item
              v-for="(domain, index) in form.options"
              :key="domain.key"
              :prop="'options.' + index + '.value'"
            >
              <el-checkbox-group v-model="domain.isRight">
                <el-checkbox>{{ domain.code }}</el-checkbox>
              </el-checkbox-group>
              <el-input v-model="domain.title"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="addDomain" :disabled="flag" size="small"
                >+增加选项与答案</el-button
              >
            </el-form-item>
          </div>
          <el-form-item label="解析视频:">
            <el-input v-model="form.videoURL"></el-input>
          </el-form-item>
          <el-form-item label="答案解析:" prop="answer">
            <quill-editor v-model="form.answer"></quill-editor>
          </el-form-item>
          <el-form-item label="题目备注:">
            <el-input
              type="textarea"
              autosize
              v-model="form.remarks"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题标签:" placeholder="请选择试题标签">
            <el-select v-model="form.tags" multiple>
              <el-option
                v-for="item in tags"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="text-align: center" @click="adds"
              >确认提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import { simple } from "@/api/hmmm/subjects";
import { list } from "@/api/hmmm/companys";
import { direction, difficulty, questionType } from "@/api/hmmm/constants";
import { simple2 } from "@/api/hmmm/directorys";
import { simple3 } from "@/api/hmmm/tags";
import { provinces, citys } from "@/api/hmmm/citys";
import { add } from "@/api/hmmm/questions";
// import { login } from '@/api/base/frame'
export default {
  data() {
    return {
      subjectList: [],
      companysList: [],
      catalogID: [],
      difficulty: [],
      questionType: [],
      directionList: [],
      provinces: [],
      citys: [],
      tags: [],
      askmNum: 69,
      radio: "",
      checked: false,
      qsType: true,
      qsTypes: false,
      flag: true,
      form: {
        subjectID: null,
        catalogID: null,
        enterpriseID: null,
        province: null,
        city: null,
        direction: null,
        question: null,
        videoURL: null,
        answer: null,
        questionType: "1",
        difficulty: "1",
        remarks: null,
        tags: null,
        options: [
          { isRight: "", code: "A", title: "", img: "" },
          { isRight: "", code: "B", title: "", img: "" },
          { isRight: "", code: "C", title: "", img: "" },
          { isRight: "", code: "D", title: "", img: "" },
        ],
      },
      rules: {
        subjectID: [
          { required: true, message: "请选择学科", trigger: "change" },
        ],
        catalogID: [
          { required: true, message: "请选择目录", trigger: "change" },
        ],
        enterpriseID: [
          { required: true, message: "请选择企业", trigger: "change" },
        ],
        province: [
          { required: true, message: "请选择省份", trigger: "change" },
        ],
        city: [{ required: true, message: "请选择城市", trigger: "change" }],
        direction: [
          { required: true, message: "请选择方向", trigger: "change" },
        ],
        question: [{ required: true, message: "请输入题干", trigger: "blur" }],
        answer: [{ required: true, message: "请输入题干", trigger: "blur" }],
      },
    };
  },
  components: {
    quillEditor,
  },
  async created() {
    // 学科列表
    const res = await simple();
    this.subjectList = res.data;
    // console.log(this.subjectList)
    // 企业列表
    const res1 = await list();
    this.companysList = res1.data.items;
    // 方向
    this.directionList = direction;
    // 城市
    this.provinces = provinces();
    // console.log(this.provinces)

    // 题型和难度
    this.difficulty = difficulty;
    this.questionType = questionType;
    // console.log(this.difficulty, this.questionType)
  },
  methods: {
    // 学科改变，发送目录和标签请求
    async handleChange(val) {
      const params = {
        subjectID: val,
      };

      const res1 = await simple2(params);
      this.catalogID = res1.data;
      const res2 = await simple3(params);
      this.tags = res2.data;
    },
    // 改变省份，城市区域列表出现
    changeProvince(val) {
      const re = this.provinces.findIndex((item) => item === val);
      this.form.city = null;
      this.citys = citys(this.provinces[re]);
    },
    // 添加选项
    addDomain() {
      const numb = String.fromCharCode(this.askmNum++);
      if (this.askmNum > 90) {
        this.flag = true;
      }
      this.form.options.push({
        isRight: "",
        code: `${numb}`,
        title: "",
        img: "",
      });
    },
    questionTypeChange(val) {
      if (val === "1") {
        this.qsType = true;
        this.qsTypes = false;
        this.flag = true;
      } else if (val === "2") {
        this.qsTypes = true;
        this.qsType = false;
        this.flag = false;
      } else if (val === "3") {
        this.qsType = false;
        this.qsTypes = false;
      }
    },
    // 确认提交
    async adds() {
      this.form.options.forEach((item) => {
        item.code === this.radio
          ? (item.isRight = true)
          : (item.isRight = false);
      });
      const str = this.form.tags.join(",");
      // this.form.tags = ''
      this.form.tags = str;
      console.log(this.form);
      this.$refs.form.validate();
      try {
        const res = await add(this.form);
        console.log(res);
        this.$message.success("添加成功");
        this.$router.push("/questions/list");
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.questionEntry {
  padding: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 100%;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 400px;
}
.el-textarea {
  width: 400px;
  element.style {
    min-height: 32.9965px;
  }
}
::v-deep .el-input__inner {
  width: 400px;
}
::v-deep .ql-editor {
  height: 300px;
}
.area {
  display: flex;
  .province {
    width: 195px;
    ::v-deep .el-select {
      width: 195px;
    }
    ::v-deep .el-input__inner {
      width: 195px;
    }
  }
  .citys {
    width: 195px;
    ::v-deep .el-select {
      width: 195px;
    }
    ::v-deep .el-input__inner {
      width: 195px;
    }
  }
}
// .typeQuestion {
//   display: flex;
// }
</style>
